<template>
    <div class="xhs-content-wrap" :class="peopleStyle" v-show="show" :style="{ transform: 'scale('+scale+')'}">
        <div class="input" ref="el" :style="{ fontSize: fontSize + 'px', top: topGap + 'px', 'padding-left': edgeGap + 'px', 'padding-right': edgeGap + 'px', 'line-height': lineHeight }" contenteditable="true"></div>
        <div class="bg-people" :class="peopleStyle"></div>
        <div class="tag"></div>
    </div>

    <div @click="doClickInner($event)" class="xhs-config-list" v-show="show" :class="{ active: isSettingActive }">
        <i class="close-setting-btn" @click="doSwitchShowSetting()">&times</i>
        <div class="list-item">
            <label>高亮文字：</label>
            <input placeholder="在此输入加粗文字" v-model.trim="strongText"></input>
        </div>
        <div class="list-item">
            <label>字体大小：</label>
            <input type="number" v-model.trim="fontSize"/>
        </div>
        <div class="list-item">
            <label>字体行高：</label>
            <input type="number" v-model.trim="lineHeight" step="0.1"/>
        </div>
        <div class="list-item">
            <label>顶部距离：</label>
            <input type="number" v-model.trim="topGap"/>
        </div>
        <div class="list-item">
            <label>边缘距离：</label>
            <input type="number" v-model.trim="edgeGap"/>
        </div>
        <div class="list-item">
            <label>人物样式：</label>
            <div>
                <input type="radio" id="p1" value="p1" v-model="peopleStyle"><label for="p1">图1</label>
                <input type="radio" id="p2" value="p2" v-model="peopleStyle"><label for="p2">图2</label>
                <input type="radio" id="p3" value="p3" v-model="peopleStyle"><label for="p3">图3</label>
                <input type="radio" id="p4" value="p4" v-model="peopleStyle"><label for="p4">图4</label>
                <input type="radio" id="p5" value="p5" v-model="peopleStyle"><label for="p5">图5</label>
            </div>
        </div>
    </div>

    <div class="download-btn xhs-setting-btn" v-show="show" @click="doSwitchShowSetting($event)">设置</div>
</template>

<script>
import { ref, watch, onMounted, onBeforeUnmount, toRefs } from 'vue'
export default {
    props: {
        show: {
            type: Boolean,
            default: false
        }
    },
    setup (props) {
        const { show } = toRefs(props)
        const strongText = ref('')
        const fontSize = ref('80')
        const topGap = ref('30')
        const edgeGap = ref('10')
        const lineHeight = ref('1.5')
        const peopleStyle = ref('p2')
        const el = ref(null)
        const scale = ref(1)
        const isSettingActive = ref(false)

        watch(strongText, (newVal) => {
            if (newVal) {
                const str = el.value.innerText
                const txtArr = newVal.split('-')
                let itemArr = null
                txtArr.forEach((item, index) => {
                    itemArr = item.split('').map(c => '<span>' + c +'</span>')
                    if (index == 0) {
                        el.value.innerHTML = str.replace(item, '<em>' + itemArr.join('') + '</em>')
                    } else {
                        el.value.innerHTML = el.value.innerHTML.replace(item, '<em>' + itemArr.join('') + '</em>')
                    }
                })
            } else {
                el.value.innerHTML = el.value.innerText
            }
        })

        const doSwitchShowSetting = (e) => {
            if (e) {
                e.stopPropagation()
            }
            isSettingActive.value = !isSettingActive.value
        }

        const doClickOuter = () => {
            if (show.value && isSettingActive.value) {
                doSwitchShowSetting()
            }
        }

        const doClickInner = (e) => {
            e.stopPropagation()
        }

        watch(peopleStyle, (newStyle) => {
            if (newStyle == 'p5') {
                fontSize.value = '70'
                topGap.value = '230'
                edgeGap.value = '70'
                lineHeight.value = '2.2'
            } else {
                fontSize.value = '80'
                topGap.value = '30'
                edgeGap.value = '10'
                lineHeight.value = '1.5'
            }
        })

        onMounted(() => {
            el.value.addEventListener('paste', (e) => {
                e.preventDefault()
                const text = e.clipboardData.getData('text/plain')
                el.value.innerHTML = text
            })
            const winWidth = document.documentElement.clientWidth || window.innerWidth
            if (winWidth < 750) {
                scale.value = winWidth / 750
            }

            document.body.addEventListener('click', doClickOuter)
        })

        onBeforeUnmount(() => {
            document.body.removeEventListener('click', doClickOuter)
        })

        return {
            el,
            scale,
            strongText,
            fontSize,
            topGap,
            peopleStyle,
            lineHeight,
            edgeGap,
            isSettingActive,
            doSwitchShowSetting,
            doClickInner,
            doClickOuter
        }
    }
}
</script>

<style lang="scss">
    @use "./style.scss";
</style>